<template>
  <div class="search-history">
    <van-cell title="历史记录">
      <template v-if="isEdit">
        <span @click="clearHistory">全部删除</span>
        &nbsp;
        <span @click="isEdit = false">完成</span>
      </template>
      <van-icon v-else name="delete" @click="isEdit = true" />
    </van-cell>
    <van-cell
      v-for="(obj, i) in historyList"
      :key="i"
      :title="obj"
      @click="clickHistory(obj)"
    >
      <van-icon v-if="isEdit" name="close" @click.stop="delHistory(i)" />
    </van-cell>
  </div>
</template>

<script>
export default {
  name: 'searchHistory',

  props: ['historyList'],

  data () {
    return {
      isEdit: false
    }
  },

  mounted () {},

  methods: {
    // 删除单条历史记录
    delHistory (i) {
      // eslint-disable-next-line vue/no-mutating-props
      this.historyList.splice(i, 1)
    },

    // 删除全部历史记录
    clearHistory () {
      // 清空 从第0个删到最后
      // eslint-disable-next-line vue/no-mutating-props
      this.historyList.splice(0)
    },

    // 点击关键字执行搜索
    clickHistory (keyword) {
      // 只有非编辑状态时，才会调用父组件事件函数
      !this.isEdit && this.$emit('onSearch', keyword)
    }
  },

  created () {},

  watch: {}
}
</script>

<style lang="lesss" scoped>
</style>
